<!-- 左侧导航栏 -->
<div class="app-sidebar colored" id="app-sidebar">
	<!-- 左侧导航栏最上面logo部分，如果sidebarHeader是null则不显示（设置了null初始值所以不会是undefined） -->
	<div class="sidebar-header" v-if="sidebarHeader !== null">
		<a class="header-brand" :href="sidebarHeader.linkUrl">
			<div class="logo-img">
				<img :src="sidebarHeader.logoUrl" class="header-brand-img" alt="silentdoer">
			</div>
			<span class="text">{{sidebarHeader.brandName}}</span>
		</a>
		<button type="button" class="nav-toggle"><i data-toggle="expanded"
													class="ik ik-toggle-right toggle-icon"></i></button>
		<button id="sidebarClose" class="nav-close"><i class="ik ik-x"></i></button>
	</div>

	<!-- 左侧导航栏内容部分 -->
	<div class="sidebar-content">
		<div class="nav-container">
			<!-- 这里拆成了多个列区，目前只写了Navigation区，这里v-if应该多个区一起作用，其实不同区应该用一个div包起来
			 然后没有获取到数据之前显示一个loading的左侧框 -->
			<nav id="main-menu-navigation" class="navigation-main">
				<div class="nav-lavel" v-if="sidebarItemsNavigation !== null">Navigation</div>

				<!-- 由于现在元素被vue给占用了，导致jquery某些操作无法实现
				，比如点击其它item时切换active会失败，需要vue代码来实现切换active的功能（应该是每次点击都是从服务端获取数据，因此active值
				会被vue从服务端获取的给覆盖掉；//"'nav-item' + item.additionalClass"
				，用动态生成的方式有个很明显的弊端，就是每次切换页面都会抖动明显（从服务器获取数据），不过可以做缓存（要有过期时间）-->
				<div v-for="item in sidebarItemsNavigation" :class="[{'active': item.active, 'has-sub': item.hasSubItems()}, 'nav-item']">
					<a :href="item.linkUrl"><i :class="'ik' + item.iconType"></i><span>{{item.itemName}}</span><span
							:class="'badge' + item.badgeType" v-if="item.badge !== null">{{item.badge}}</span></a>
					<div class="submenu-content" v-if="item.hasSubItems()">
						<a v-for="sub in item.subItems" class="menu-item" :href="sub.linkUrl">{{sub.itemName}}</a>
					</div>
				</div>

				<!--<div class="nav-item active">
					<a :href="indexUrl"><i class="ik ik-bar-chart-2"></i><span>Dashboard</span></a>
				</div>
				<div class="nav-item">
					<a :href="navbarUrl"><i class="ik ik-menu"></i><span>Navigation</span><span
							class="badge badge-success">New</span></a>
				</div>
				<div class="nav-item has-sub">
					<a href="javascript:void(0)"><i class="ik ik-layers"></i><span>Widgets</span> <span
							class="badge badge-danger">150+</span></a>
					<div class="submenu-content">
						<a :href="widgetsUrl" class="menu-item">Basic</a>
						<a :href="widgetStatisticUrl" class="menu-item">Statistic</a>
						<a :href="widgetDataUrl" class="menu-item">Data</a>
						<a :href="widgetChartUrl" class="menu-item">Chart Widget</a>
					</div>
				</div>-->
				<!-- 暂时先只对上面的做服务端动态生成 -->
				<div class="nav-lavel">UI Element</div>
				<div class="nav-item has-sub">
					<a href="#"><i class="ik ik-box"></i><span>Basic</span></a>
					<div class="submenu-content">
						<a href="http://localhost:8080/pages/ui/alerts.html" class="menu-item">Alerts</a>
						<a href="http://localhost:8080/pages/ui/badges.html" class="menu-item">Badges</a>
						<a href="http://localhost:8080/pages/ui/buttons.html" class="menu-item">Buttons</a>
						<a href="http://localhost:8080/pages/ui/navigation.html" class="menu-item">Navigation</a>
					</div>
				</div>
				<div class="nav-item has-sub">
					<a href="#"><i class="ik ik-gitlab"></i><span>Advance</span> <span
							class="badge badge-success">New</span></a>
					<div class="submenu-content">
						<a href="http://localhost:8080/pages/ui/modals.html" class="menu-item">Modals</a>
						<a href="http://localhost:8080/pages/ui/notifications.html" class="menu-item">Notifications</a>
						<a href="http://localhost:8080/pages/ui/carousel.html" class="menu-item">Slider</a>
						<a href="http://localhost:8080/pages/ui/range-slider.html" class="menu-item">Range Slider</a>
						<a href="http://localhost:8080/pages/ui/rating.html" class="menu-item">Rating</a>
					</div>
				</div>
				<div class="nav-item has-sub">
					<a href="#"><i class="ik ik-package"></i><span>Extra</span></a>
					<div class="submenu-content">
						<a href="http://localhost:8080/pages/ui/session-timeout.html" class="menu-item">Session Timeout</a>
					</div>
				</div>
				<div class="nav-item">
					<a href="http://localhost:8080/pages/ui/icons.html"><i class="ik ik-command"></i><span>Icons</span></a>
				</div>
				<div class="nav-lavel">Forms</div>
				<div class="nav-item has-sub">
					<a href="#"><i class="ik ik-edit"></i><span>Forms</span></a>
					<div class="submenu-content">
						<a href="http://localhost:8080/pages/form-components.html" class="menu-item">Components</a>
						<a href="http://localhost:8080/pages/form-addon.html" class="menu-item">Add-On</a>
						<a href="http://localhost:8080/pages/form-advance.html" class="menu-item">Advance</a>
					</div>
				</div>
				<div class="nav-item">
					<a href="http://localhost:8080/pages/form-picker.html"><i class="ik ik-terminal"></i><span>Form Picker</span>
						<span class="badge badge-success">New</span></a>
				</div>

				<div class="nav-lavel">Tables</div>
				<div class="nav-item">
					<a href="http://localhost:8080/pages/table-bootstrap.html"><i
							class="ik ik-credit-card"></i><span>Bootstrap Table</span></a>
				</div>
				<div class="nav-item">
					<a href="http://localhost:8080/pages/table-datatable.html"><i class="ik ik-inbox"></i><span>Data Table</span></a>
				</div>

				<div class="nav-lavel">Charts</div>
				<div class="nav-item has-sub">
					<a href="#"><i class="ik ik-pie-chart"></i><span>Charts</span> <span
							class="badge badge-success">New</span></a>
					<div class="submenu-content">
						<a href="http://localhost:8080/pages/charts-chartist.html" class="menu-item active">Chartist</a>
						<a href="http://localhost:8080/pages/charts-flot.html" class="menu-item">Flot</a>
						<a href="http://localhost:8080/pages/charts-knob.html" class="menu-item">Knob</a>
						<a href="http://localhost:8080/pages/charts-amcharts.html" class="menu-item">Amcharts</a>
					</div>
				</div>

				<div class="nav-lavel">Apps</div>
				<div class="nav-item">
					<a href="http://localhost:8080/pages/calendar.html"><i class="ik ik-calendar"></i><span>Calendar</span></a>
				</div>
				<div class="nav-item">
					<a href="http://localhost:8080/pages/taskboard.html"><i class="ik ik-server"></i><span>Taskboard</span></a>
				</div>

				<div class="nav-lavel">Pages</div>

				<div class="nav-item has-sub">
					<a href="#"><i class="ik ik-lock"></i><span>Authentication</span></a>
					<div class="submenu-content">
						<a href="http://localhost:8080/pages/login.html" class="menu-item">Login</a>
						<a href="http://localhost:8080/pages/register.html" class="menu-item">Register</a>
						<a href="http://localhost:8080/pages/forgot-password.html" class="menu-item">Forgot Password</a>
					</div>
				</div>
				<div class="nav-item has-sub">
					<a href="#"><i class="ik ik-file-text"></i><span>Other</span></a>
					<div class="submenu-content">
						<a href="http://localhost:8080/pages/profile.html" class="menu-item">Profile</a>
						<a href="http://localhost:8080/pages/invoice.html" class="menu-item">Invoice</a>
					</div>
				</div>
				<div class="nav-item">
					<a href="http://localhost:8080/pages/layouts.html"><i class="ik ik-layout"></i><span>Layouts</span><span
							class="badge badge-success">New</span></a>
				</div>
				<div class="nav-lavel">Other</div>
				<div class="nav-item has-sub">
					<a href="javascript:void(0)"><i class="ik ik-list"></i><span>Menu Levels</span></a>
					<div class="submenu-content">
						<a href="javascript:void(0)" class="menu-item">Menu Level 2.1</a>
						<div class="nav-item has-sub">
							<a href="javascript:void(0)" class="menu-item">Menu Level 2.2</a>
							<div class="submenu-content">
								<a href="javascript:void(0)" class="menu-item">Menu Level 3.1</a>
							</div>
						</div>
						<a href="javascript:void(0)" class="menu-item">Menu Level 2.3</a>
					</div>
				</div>
				<div class="nav-item">
					<a href="javascript:void(0)" class="disabled"><i
							class="ik ik-slash"></i><span>Disabled Menu</span></a>
				</div>
				<div class="nav-item">
					<a href="javascript:void(0)"><i class="ik ik-award"></i><span>Sample Page</span></a>
				</div>
				<div class="nav-lavel">Support</div>
				<div class="nav-item">
					<a href="javascript:void(0)"><i class="ik ik-monitor"></i><span>Documentation</span></a>
				</div>
				<div class="nav-item">
					<a href="javascript:void(0)"><i class="ik ik-help-circle"></i><span>Submit Issue</span></a>
				</div>
			</nav>
		</div>
	</div>
</div>